<template>
	<view class="content">
		{{$store.state.age}}
		<Header></Header>
		<view class='home-tabs'>
			<u-tabs :list="topBar" @change="changeTabs" :current='current' :inactiveStyle="{
                    color: '#AAAAAA'
                }" :activeStyle="{
                    color: '#333333',
                    fontWeight: 'bold',
                    fontSize: '29rpx'
                }"></u-tabs>
		</view>
		<view class='home-swiper'>
			<swiper :duration="500" :current='current' @change='changeSwiper' :style="'height:'+swiperHeight+'px;'">
				<swiper-item v-for='(item,index) in topBar' :key='index'>
					<scroll-view scroll-y="true" :style="'height:'+swiperHeight+'px;'" @scrolltolower="lower">
						<keep-alive>
						<component :is='activeCom' v-if='index==current' :courseList='courseList'></component>
						</keep-alive>
					</scroll-view>

				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/common/Header.vue'
	import Recommend from '@/components/home/recommend.vue'
	import Free from '@/components/home/free.vue'
	import ActualCombat from '@/components/home/actualCombat.vue'
	import { searchCourse } from '@/api/course.js'
	import {  mixin  } from '@/mixins/mixin.js'
	export default {
		mixins:[mixin],
		data() {
			return {
				swiperHeight: 0,
				current: 0,
				topBar: [{
					name: '今日推荐',
				}, {
					name: '免费课程',
				}, {
					name: '实战课程'
				}],
				activeCom: Recommend,
				courseList: [],
				courseParams: {
					pageNum: 1,
					pageSize: 3,
					entity: {
						sortBy: "clicks-asc"
					}
				}
			}
		},
		onReady() {
			this.swiperHeight  = this.getHeight('.header-search','.home-tabs');
			// let searchHeight = 0;
			// let tabsHeight = 0;
			// //header-search高度
			// let searchView = uni.createSelectorQuery().select('.header-search');
			// searchView.boundingClientRect(data => {
			// 	searchHeight = data.height;
			// }).exec();
			// //home-tabs高度
			// let tabsView = uni.createSelectorQuery().select('.home-tabs');
			// tabsView.boundingClientRect(data => {
			// 	tabsHeight = data.height;
			// }).exec();

			// let that = this;
			// uni.getSystemInfo({
			// 	success(res) {
			// 		that.swiperHeight = res.windowHeight - searchHeight - tabsHeight;
			// 	}
			// })
		},
		onLoad() {
			this.getCourse(this.courseParams)
		},
		methods: {
			//切换tabs
			changeTabs({
				index
			}) {
				this.current = index;
				this.tabsCom(index);
			},
			//切换swiper
			changeSwiper(e) {
				this.current = e.detail.current;
				this.tabsCom(e.detail.current);
			},
			//判断动态组件显示
			tabsCom(index) {
				switch (index) {
					case 0:
						this.activeCom = Recommend;
						break;
					case 1:
						this.activeCom = Free;
						break;
					case 2:
						this.activeCom = ActualCombat;
						break;
				}
			},
			// 大家都在看数据
			getCourse(params) {
				searchCourse(params).then(res => {
					this.courseList=[...this.courseList,... res.pageInfo.list];
					// this.courseList = res.pageInfo.list;
					// console.log(res)
				})
			},
			// 滚动到底部
			lower() {
				this.courseParams.pageNum++

				this.getCourse(this.courseParams)
			}
		},
		components: {
			Header,
			Recommend,
			Free,
			ActualCombat
		}
	}
</script>

<style>
	/deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 29rpx;
		font-weight: 400;
	}

	.home-swiper {
		padding: 29rpx;
	}

	/deep/ ::-webkit-scrollbar {
		display: block;
		width: 0px !important;
		height: 0px !important;
	}
</style>